const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'development',
    entry: {
        index: './src/index/index.js', // 首页入口
        list: './src/list/list.js', // 首页入口
    },
    output: {
        filename: 'js/[name].js', // 输出文件名
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.(jpg|png|svg|jpeg)$/i, // 加载图片
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 0 * 1024,
                            outputPath: 'img/',
                            esModule: false,
                            name: '[name].[ext]',
                        },
                    },
                ],
            },
            {
                test: /\.(less)|(css)$/i, // 处理less文件
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader',
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index/index.html',
            chunks: ['index'],
            filename: 'index.html',
        }),
        // new HtmlWebpackPlugin({
        //     template: './src/list/list.html',
        //     chunks: ['list'],
        //     filename: 'list.html',
        // }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
    ],
    stats: 'errors-only',
}
